<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        
    </style>
</head>
<body>
    <input type="text" id="txt"><span></span>
</body>
<script>
    
    var otxt = document.getElementById("txt");

    otxt.oninput = function(){
        // 数字，字母，特殊字符，任意一种，差，任意两种，中，都有，强
        var str = this.value;

        // 用来记录将来是否出现对应的数据：a数字，b字母，c特殊
        var a=0;
        var b=0;
        var c=0;

        // 遍历字符，逐个判断
        for(var i=0;i<str.length;i++){
            // 0~9
            if(str[i] >=0 && str[i] <= 9){
                // console.log("出现数字了")
                a = 1;
            }
            // a-z，A-Z
            if(str[i] >= "a" && str[i] <= "z" || str[i] >= "A" && str[i] <= "Z"){
                // console.log("出现字母了")
                b = 1;
            }
            // 非0~9，a-z，A-Z
            if(!(str[i] >=0 && str[i] <= 9 || str[i] >= "a" && str[i] <= "z" || str[i] >= "A" && str[i] <= "Z")){
                // console.log("出现特殊字符了")
                c = 1;
            }
        }

        // 将三种类型的状态加起来，根据和，判断出现了几种
        switch(a+b+c){
            case 1:this.nextElementSibling.innerHTML = "差";break;
            case 2:this.nextElementSibling.innerHTML = "中";break;
            case 3:this.nextElementSibling.innerHTML = "强";break;
        }
    }

</script>
</html>